<template>
  <div id="vestTalk">
    <!--添加图片组件-->
    <uploadCommonImg
      v-if="dialogData.isShow"
      :dialog-data="dialogData"
      @setImgInfo="setImgInfo"
    ></uploadCommonImg>
    <el-input
      ref="inputCon"
      class="input-con"
      v-model="content"
      maxlength="150"
      show-word-limit
      :disabled="loading"
      @keyup.enter.native="sendContent"
      clearable
    ></el-input>
    <el-button type="primary" @click="showUpImg">
      添加图片
    </el-button>
    <el-button
      v-for="item in showBtnList"
      :key="item.dictValue"
      type="primary"
      @click="changeCon(item.dictValue)"
    >
      {{ item.dictLabel }}
    </el-button>
    <!--表情按钮-->
    <el-popover
      v-model="visible"
      popper-class="showLook"
      style="margin:0 10px;"
      placement="top"
      width="700"
      trigger="click"
    >
      <img
        v-for="(item, index) in lookList"
        :key="index"
        :src="item.url"
        alt="item.title"
        :title="item.title"
        @click="pushLook(item.title)"
      />
      <el-button slot="reference" type="primary">
        表情
      </el-button>
    </el-popover>
    <el-row>
      <el-button :loading="loading" type="success" @click="sendContent('A')">
        A类马甲发送
      </el-button>
      <el-button :loading="loading" type="success" @click="sendContent('B')">
        B类马甲发送
      </el-button>
      <el-button
        :loading="loading"
        type="success"
        @click="sendContent('random')"
      >
        通用马甲发送
      </el-button>
      <el-select v-model="userId" filterable placeholder="请选择马甲" clearable>
        <el-option
          v-for="item in vestList"
          :key="item.robotId"
          :label="item.robotName"
          :value="item.robotId"
        ></el-option>
      </el-select>
      <el-button :loading="loading" type="success" @click="sendContent('set')">
        指定马甲发送
      </el-button>
    </el-row>
  </div>
</template>

<script>
import uploadCommonImg from '@common/uploadCommonImg' // 上传图片公共组件
import { getRandomCon, getVestList } from '@utils/dictionariesFunc'
import { addRobotCommon } from '@/api/common/commentsAPI'
export default {
  name: 'vestTalk',
  msg: '维护/发布页面-发送评论',
  props: ['showBtnList', 'infoObj'],
  components: {
    uploadCommonImg
  },
  data() {
    return {
      loading: false,
      content: '',
      lookList: [], // 表情列表
      visible: false,
      dialogData: {
        isShow: false
      },
      imgInfo: [], //上传图片信息
      userId: '', //马甲id
      vestList: [{ robotId: '', robotName: '- 请选择马甲 -' }] // 选择马甲
    }
  },
  computed: {
    vestLists() {
      return this.$store.state.vestList
    }
  },
  watch: {
    visible(newV, oldV) {
      // 监听表情弹窗是否打开，给表情列表赋值
      this.lookList = newV ? this.$store.getters.lookList : []
    }
  },
  mounted() {
    this.getVest()
  },
  methods: {
    getVest() {
      this.vestList = this.vestList.concat(this.vestLists)
    },
    /* 随机评论内容 */
    async changeCon(type) {
      let obj = {
        grade: type,
        collegeId: this.infoObj.categoryId //学院id,帖子没有学院。通用低配、通用高配不限制id
      }
      this.content = await getRandomCon(obj)
      this.$refs.inputCon.focus()
    },
    /* 添加表情 */
    pushLook(title) {
      this.content += `[${title}]`
    },
    /*显示上传图片组件*/
    showUpImg() {
      this.dialogData.isShow = true
    },
    /*图片上传成功，给 imgInfo 赋值*/
    setImgInfo(info) {
      this.imgInfo = [...info]
      this.$refs.inputCon.focus()
    },
    /* 发送评论 */
    async sendContent(type) {
      let grade = ''
      let userid = ''
      switch (type) {
        case 'A':
        case 'B':
          //A/B类马甲发送
          grade = type
          userid = ''
          this.userId = ''
          break
        case 'random':
          //通用马甲发送
          grade = ''
          userid = ''
          this.userId = ''
          break
        case 'set':
          //指定马甲发送
          grade = ''
          userid = this.userId
          break
      }
      if (!this.content && this.imgInfo.length === 0) {
        this.$message.warning('发送内容不能为空')
        return
      }
      if (type === 'set' && !userid) {
        this.$message.warning('未指定马甲')
        return
      }
      this.loading = true
      let obj = {
        content: this.content, //必传
        images: this.imgInfo, // 图片信息  无图片传空数组
        topicCreatedBy: this.infoObj.userId, //生活 /作业 /作品 创建人id
        topicId: this.infoObj.topicId, //生活 /作业 /作品的id 必传
        topicType: this.infoObj.topicType, //话题类型 必传
        robotUserId: userid, ////马甲userid , 如传入马甲id使用此id发布 , 不传则随机一个马甲进行发布
        robotGrade: grade //马甲等级
      }
      let isSuccess = await addRobotCommon(obj)
      if (isSuccess === true) {
        /*this.$emit('refresh')*/
        this.$emit('addComment')
        this.imgInfo = []
        this.content = ''
        this.dialogData.isShow = false
      }
      this.loading = false
    }
  }
}
</script>

<style lang="less">
#vestTalk {
  .el-input.input-con {
    width: 540px;
    margin-right: 10px;

    .el-input__inner,
    .el-input__icon {
      height: 30px;
      line-height: 30px;
    }
    .el-input__inner {
      padding-right: 75px;
    }
  }
  .el-select {
    width: 200px;
    margin: 0 10px;
    .el-input__inner {
      line-height: 28px;
      height: 28px;
    }
    .el-input__icon {
      line-height: 28px;
    }
  }
  .el-button + .el-button {
    margin-bottom: 10px;
  }
}
</style>
